<script setup>
import { ref, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { getCommentListAPI, deleteCommentAPI } from '@/api/leaveword'

const props = defineProps({
  leaveword: {
    required: true,
    type: Object
  }
})

// 评论列表
const list = ref([])
const tableLoading = ref(false)
const getList = async () => {
  tableLoading.value = true
  try {
    const params = { leaveword_id: props.leaveword.id }
    const result = await getCommentListAPI(params)
    list.value = result.map((item) => {
      item.btnLoading = false
      return item
    })
  } finally {
    tableLoading.value = false
  }
}

// 删除评论
const handleDelete = async (row) => {
  row.btnLoading = true
  try {
    await deleteCommentAPI(row.id)
    ElMessage.success('删除成功')
    getList()
  } finally {
    row.btnLoading = false
  }
}

watch(
  () => props.leaveword,
  () => {
    getList()
  }
)
onMounted(() => {
  getList()
})
</script>

<template>
  <!-- 图片 -->
  <zy-image
    class="leaveword-img"
    v-if="leaveword.img_url?.startsWith('http')"
    :url="leaveword.img_url"
    width="100%"
    height="auto"
  />
  <!-- 留言卡片 -->
  <div class="leaveword-card" :style="{ backgroundColor: leaveword.color.color }">
    <!-- 顶部 -->
    <div class="top">
      <p class="time">{{ leaveword.created_time }}</p>
      <p class="label">{{ leaveword.label.name }}</p>
    </div>
    <!-- 内容 -->
    <div class="content">{{ leaveword.content }}</div>
    <!-- 底部 -->
    <div class="bottom">
      <div class="bottom-left">
        <svg-icon
          class="bottom-icon like"
          :class="{ active: leaveword.like_count > 0 }"
          icon-name="aixin"
        ></svg-icon>
        <!-- 喜欢个数 -->
        <span>{{ leaveword.like_count }}</span>
        <!-- 评论个数 -->
        <svg-icon icon-name="liuyan" class="bottom-icon"></svg-icon>
        <span>{{ leaveword.comment_count }}</span>
      </div>
      <div class="name">{{ leaveword.name }}</div>
    </div>
  </div>
  <!-- 留言人 -->
  <el-descriptions class="leaveword-info" title="留言人" :column="5" direction="vertical" border>
    <el-descriptions-item label="id">{{ leaveword.user.id }}</el-descriptions-item>
    <el-descriptions-item label="用户名">{{ leaveword.user.username }}</el-descriptions-item>
    <el-descriptions-item label="昵称">{{ leaveword.user.nickname }}</el-descriptions-item>
    <el-descriptions-item label="头像">
      <zy-avatar width="40px" height="40px" radius="3px" :url="leaveword.user.avatar" />
    </el-descriptions-item>
    <el-descriptions-item label="状态">
      <el-tag :type="leaveword.user.status === 1 ? 'success' : 'error'">{{
        leaveword.user.status === 1 ? '正常' : '禁用'
      }}</el-tag>
    </el-descriptions-item>
  </el-descriptions>
  <!-- 评论列表 -->
  <div class="title">评论</div>
  <el-table v-loading="tableLoading" :data="list">
    <el-table-column label="用户名" show-overflow-tooltip>
      <template #default="{ row }">{{ row.user.username }}</template>
    </el-table-column>
    <el-table-column label="昵称" show-overflow-tooltip>
      <template #default="{ row }">{{ row.user.nickname }}</template>
    </el-table-column>
    <el-table-column label="头像">
      <template #default="{ row }">
        <zy-avatar
          :url="row.user.avatar"
          width="30px"
          height="30px"
          radius="3px"
          preview-teleported
        />
      </template>
    </el-table-column>
    <el-table-column label="评论内容" prop="content" show-overflow-tooltip />
    <el-table-column label="操作" fixed="right" width="80">
      <template #default="{ row }">
        <el-popconfirm title="确认要删除此条数据吗？" @confirm="handleDelete(row)">
          <template #reference>
            <el-button
              v-permission="'leaveword:list:deleteComment'"
              :loading="row.btnLoading"
              type="primary"
              link
              >删除</el-button
            >
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
</template>

<style lang="scss" scoped>
.leaveword-img {
  margin-bottom: 15px;
}
.leaveword-card {
  padding: 10px 20px 16px;
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    p {
      font-size: 12px;
      color: #949494;
    }
  }
  .content {
    min-height: 160px;
    font-size: 14px;
    font-family: serif;
    color: #202020;
    margin: 15px 0;
    cursor: pointer;
  }
  .bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .bottom-left {
      display: flex;
      align-items: center;
      font-size: 16px;
      .bottom-icon {
        margin-right: 4px;
        color: #949494;
      }
      .like {
        cursor: pointer;
      }
      .active {
        color: #f67770;
      }
      span {
        font-size: 12px;
        color: #949494;
        margin-right: 12px;
      }
    }
    .name {
      font-family: serif;
      font-size: 16px;
      color: #202020;
      font-weight: 700;
    }
  }
}
.leaveword-info {
  margin-top: 15px;
}
.title {
  margin-top: 20px;
  margin-bottom: 10px;
  color: var(--el-text-color-primary);
  font-size: 16px;
  font-weight: bold;
}
.el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell {
  text-align: center;
  vertical-align: middle;
}
</style>
